<template>
  <div class="common-layout">
    <el-container>
      <el-aside>
        <!-- 学科搜索开始 -->
        <el-input v-model="subjectName" style="width: 210px" placeholder="请输入学科" clearable
          @keyup.enter="searchSubject" />
        <el-button type="primary" icon="Search" @click="searchSubject">搜索</el-button>
        <!-- 学科搜索结束 -->

        <!-- 学科渲染开始 -->
        <el-tree ref="treeRef" :default-expanded-keys="[0]" :default-checked-keys="[0]" :data="data" node-key="id"
          :props="defaultProps" @node-click="handleNodeClick"
          style="font-size: large; background-color: transparent;" />
        <!-- 学科渲染结束 -->
      </el-aside>
      <el-main>
        <el-form :inline="true">
          <el-form-item>
            <el-button type="primary" icon="Plus" @click="addDialog = true">添加题库</el-button>
          </el-form-item>
          <el-form-item>
            <el-input v-model="searchForm.name" placeholder="请输入题库名称" clearable style="width: 240px;" />
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchForm.status" placeholder="请选择审批状态" clearable style="width: 240px">
              <el-option v-for="item in options" :key="item.status" :label="item.name" :value="item.status" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="searchQuestionBank">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="Close" @click="clear">清空</el-button>
          </el-form-item>
        </el-form>
        <!-- 题库渲染开始 -->
        <el-table ref="multipleTableRef" v-loading="loading" row-key="sid" style="width: 100%" :data="tableData">
          <el-table-column property="name" label="题库名称" min-width="100" width="200" show-overflow-tooltip
            align="left" />
          <el-table-column property="description" label="描述" show-overflow-tooltip align="center" />
          <el-table-column label="状态" width="100" align="center">
            <template v-slot="scope">
              <el-tag :type="scope.row.status == 0 ? 'primary' : scope.row.status == 1 ? 'success' : 'danger'">
                {{ scope.row.status == 0 ? " 未审批" : scope.row.status == 1 ? "审批通过" : "审批驳回" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column property="createTime" label="创建时间" min-width="173" width="173" align="center" />
          <el-table-column property="updateTime" label="修改时间" min-width="173" width="173" align="center" />
          <el-table-column label="操作" fixed="right" width="200" align="center">
            <template v-slot="scope">
              <el-link type="primary" icon="View" :disabled="scope.row.status != 1" style="margin-right: 10px"
                @click="look(scope.row)">
                查看题目
              </el-link>
              <el-link type="primary" icon="edit" style="margin-right: 10px" @click="update(scope.row)">
                修改
              </el-link>
              <el-link type="danger" icon="delete" @click="del(scope.row.id)">
                删除
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- 题库渲染结束 -->

        <!-- 分页开始 -->
        <br>
        <el-pagination v-model:current-page="page" v-model:page-size="size" :page-sizes="[5, 10, 15, 20]"
          :background="true" layout="total, sizes, prev, pager, next" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
        <!-- 分页结束 -->

        <!-- 添加题库开始 -->
        <QuestionBankAdd v-model:addDialog="addDialog" @getQuestionsBankList="getQuestionsBankList" v-if="addDialog" />
        <!-- 添加题库结束 -->

        <!-- 修改题库开始 -->
        <QuestionBankUpdate v-model:updateDialog="updateDialog" :update-form="updateForm"
          @getQuestionsBankList="getQuestionsBankList" v-if="updateDialog" />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import axios from '@/axios/index.js'
import QuestionBankAdd from './QuestionBankAdd.vue'
import QuestionBankUpdate from './QuestionBankUpdate.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'

const treeRef = ref()
const router = useRouter()
let page = ref(1)
let size = ref(5)
let total = ref(10)
let tableData = ref([])//表格数据
let updateForm = ref()
let loading = ref(false)//加载动画
let addDialog = ref(false)//添加弹框
let updateDialog = ref(false)//修改弹框
let subjectId = ref(0)//当前选中学科id
let subjectName = ref('')//模糊搜索学科条件
let data = ref([
  {
    id: 0,
    subjectName: '全部学科',
    children: []
  }
])//题库列表
let searchForm = ref({
  name: '',
  status: null
})//题库搜索表单

//模糊搜索下拉菜单
let options = ref([
  {
    name: '未审批',
    status: 0
  },
  {
    name: '审批通过',
    status: 1
  },
  {
    name: '审批驳回',
    status: 2
  }
])

const defaultProps = {
  label: 'subjectName',
  children: 'children'
}

//打开修开框
let update = function (row) {
  updateForm.value = row
  updateDialog.value = true
}

//删除题库
let del = function (id) {
  ElMessageBox.confirm(
    '当前操作将永久删除数据,请确认是否继续删除?',
    '系统提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    axios.delete(`/api/v1/admin/question/banks`, {
      params: {
        id
      }
    }).then(response => {
      ElMessage({
        type: 'success',
        message: response.data.message
      })
      getQuestionsBankList(-1, -1, subjectId.value)
    })
  }).catch(() => { })
}

//模糊搜索学科
let searchSubject = function () {
  axios.get(`/api/v1/admin/subject/name`, {
    params: {
      subjectName: subjectName.value
    }
  }).then(response => {
    data.value[0].children = response.data.data
  })
}

//模糊搜索题库
let searchQuestionBank = function () {
  axios.get(`/api/v1/admin/question/banks`, {
    params: {
      page: page.value,
      size: size.value,
      sid: subjectId.value,
      name: searchForm.value.name,
      status: searchForm.value.status
    }
  }).then(response => {
    tableData.value = response.data.data.data
    total.value = response.data.data.total
  })
}

let clear = function () {
  searchForm.value = {
    name: '',
    status: null
  }
  getQuestionsBankList(-1, -1, subjectId.value)
}

//查询所有学科
let getSubjectList = function () {
  axios.get(`/api/v1/admin/subject/list`, {
    params: {
      currentPage: 1,
      pageSize: -1
    }
  }).then(response => {
    data.value[0].children = response.data.data.records
  })
}

//获取题库列表
let getQuestionsBankList = function (current, limit, sid, name, status) {
  if (current == -1 && limit == -1) {
    current = page.value
    limit = size.value
  }
  if (sid == null) {
    sid = subjectId.value
  }
  axios.get(`/api/v1/admin/question/banks`, {
    params: {
      page: current,
      size: limit,
      sid: sid,
      name: name,
      status: status
    }
  }).then(response => {
    total.value = response.data.data.total
    tableData.value = response.data.data.data
  })
}

onMounted(() => {
  getSubjectList()
  getQuestionsBankList(page.value, size.value, 0)
  nextTick(() => {
    const tree = treeRef.value
    if (tree) {
      // 获取第一个节点（假设你想点击的是 id 为 1 的节点）
      const node = tree.getNode(0)
      if (node) {
        // 设置当前节点并手动触发点击事件
        tree.setCurrentKey(0)
        // 如果你需要确保点击事件处理函数被调用，也可以手动调用它
        handleNodeClick(node.data)
      }
    }
  })
})

//查看题目
let look = function (form) {
  router.push({ path: `/questionBank/questions/${form.id}` })
}

//当节点被点击时触发
const handleNodeClick = (data) => {
  if (data.id == 0) {
    clear()
  }
  subjectId.value = data.id
  getQuestionsBankList(page.value, size.value, data.id, null, null)
}

//当page发生变化时触发
const handleCurrentChange = (val) => {
  getQuestionsBankList(val, size.value, subjectId.value, searchForm.value.name, searchForm.value.status)
}

//当size发生变化时触发
const handleSizeChange = (val) => {
  getQuestionsBankList(page.value, val, subjectId.value, searchForm.value.name, searchForm.value.status)
}

</script>

<style scoped>
.common-layout {
  height: 100%;
}

.el-header,
.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #fff;
  color: #333;
  text-align: center;
  padding: 10px 5px 0 10px;
  border-radius: 5px;
}

.el-main {
  height: 100%;
  background-color: #fff;
  color: #333;
  margin-left: 20px;
  border-radius: 5px;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container {
  height: 100%;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>